﻿<common:LayoutAwarePage
    x:Class="BasicLight.Client.Index"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BasicLight.Client"
    xmlns:common="using:BasicLight.Common"
    xmlns:include="using:BasicLight.Client.Includes"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Grid Width="242" Height="242" Background="#6E6E6E">
                <Border BorderBrush="Black" BorderThickness="0" VerticalAlignment="Bottom" Background="#FF262626">
                    <StackPanel>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Property1}" Margin="5" Foreground="White"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Property2}" Margin="5" Foreground="White"/>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="#FF191919">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <include:Background Grid.RowSpan="2"/>
        
        <ScrollViewer Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalScrollMode="Disabled" ZoomMode="Disabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Style="{StaticResource Blue-ScrollViewer}">
            <StackPanel Margin="120,150,0,0" Orientation="Horizontal">
                <Grid HorizontalAlignment="Left" Margin="0,0,80,0">
                    <StackPanel Margin="0" Orientation="Vertical">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Tata" VerticalAlignment="Top" Style="{StaticResource LogoText}"/>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="•  柔和亲切又不失Windows Store App的风格" VerticalAlignment="Top" Style="{StaticResource Font-B1}" Foreground="White" Margin="0,17,0,0" Opacity="0.4"/>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="•  优化过的交互细节让你的产品更加出色" VerticalAlignment="Top" Style="{StaticResource Font-B1}" Foreground="White" Margin="0,5,0,0" Opacity="0.4"/>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="•  亮暗两版随意切换，适用于各种配色方案" VerticalAlignment="Top" Style="{StaticResource Font-B1}" Foreground="White" Margin="0,5,0,0" Opacity="0.4"/>

                    </StackPanel>
                </Grid>
                <StackPanel Orientation="Vertical" Margin="0,0,80,0">
                    <Grid x:Name="Check_box" Margin="0,5,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Check box" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                            <CheckBox Content="CheckBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,20" Style="{StaticResource Blue-CheckBox}"/>
                        </StackPanel>
                    </Grid>
                    <Grid x:Name="Radio_button" Margin="0,64,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Radio button" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                            <RadioButton Content="male" HorizontalAlignment="Left" VerticalAlignment="Top" GroupName="Sex" Margin="0,0,0,20" Style="{StaticResource Blue-RadioButton}"/>
                            <RadioButton Content="female" HorizontalAlignment="Left" VerticalAlignment="Top" GroupName="Sex" Style="{StaticResource Blue-RadioButton}"/>
                        </StackPanel>
                    </Grid>
                    <Grid x:Name="Push_button" Margin="0,32,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Push button" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Horizontal" Grid.Row="1">
                            <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,20,0" Style="{StaticResource Blue-Button}" Click="OnTopClick"/>
                            <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,20" Style="{StaticResource Blue-RecommandedButton}"/>
                        </StackPanel>
                    </Grid>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="0,0,80,0">
                    <Grid x:Name="Toggle_button">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="中国制造" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource GroupHeaderText}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                            <ToggleButton Content="ToggleButton" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-ToggleButton}"/>
                        </StackPanel>
                    </Grid>
                    <Grid x:Name="Context_menu" Margin="0,81,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Context menu" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Style="{StaticResource Blue-ContentControl}" Width="144">
                            <StackPanel>
                                <RadioButton HorizontalAlignment="Stretch" Height="40" Content="Reply" VerticalAlignment="Top" Style="{StaticResource Blue-RadioButtonforContextmenu}" GroupName="Reply"/>
                                <RadioButton HorizontalAlignment="Stretch" Height="40" Content="Reply all" VerticalAlignment="Top" Style="{StaticResource Blue-RadioButtonforContextmenu}" Margin="0" GroupName="Reply"/>
                                <RadioButton HorizontalAlignment="Stretch" Height="40" Content="Forward" VerticalAlignment="Top" Style="{StaticResource Blue-RadioButtonforContextmenu}" Margin="0" GroupName="Reply" IsChecked="True"/>
                                <Rectangle Height="1" StrokeEndLineCap="Square" Stroke="Black" Width="100" Margin="0,9" StrokeThickness="0" Opacity="0.2" Fill="Black"/>
                                <RadioButton HorizontalAlignment="Stretch" Height="40" Content="Mark as unread" VerticalAlignment="Top" Style="{StaticResource Blue-RadioButtonforContextmenu}" Margin="0" GroupName="Reply" IsChecked="False"/>
                                <RadioButton HorizontalAlignment="Stretch" Height="40" Content="Delete" VerticalAlignment="Top" Style="{StaticResource Blue-RadioButtonforContextmenu}" Margin="0" GroupName="Reply" IsChecked="False"/>
                            </StackPanel>
                        </ContentControl>
                    </Grid>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="0,0,80,0">
                    <Grid x:Name="Toggle_switch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Toggle switch" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                            <ToggleSwitch Header="ToggleSwitch" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-ToggleSwitch}"/>
                        </StackPanel>
                    </Grid>
                    <Grid x:Name="Commend_button" Margin="0,42,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Commend button" VerticalAlignment="Top" Margin="0,1,0,0" Opacity="0.4" Style="{StaticResource Font-B2}"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                            <Button HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-RecommandedCommandButton}" Width="280" Height="52" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,0,20">
                                <StackPanel Margin="0,-5">
                                    <TextBlock TextWrapping="Wrap" Text="Yes, share and connect" FontWeight="SemiLight" FontSize="14.667"/>
                                    <TextBlock TextWrapping="Wrap" Text="Use this option for home or work" FontSize="14.667" FontWeight="SemiLight" Opacity="0.6" Margin="0,2,0,0"/>
                                </StackPanel>
                            </Button>
                            <Button HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-CommandButton}" Width="280" Height="72" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,0,20">
                                <StackPanel Margin="0,-5">
                                    <TextBlock TextWrapping="Wrap" Text="Secondary command Link rest state" FontWeight="SemiLight" FontSize="14.667"/>
                                    <TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consecturelit adipisicing elit, sed do eiusmod." FontSize="14.667" FontWeight="SemiLight" Opacity="0.6" Margin="0,2,0,0"/>
                                </StackPanel>
                            </Button>
                            <Button HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-CommandButton}" Width="280" Height="32" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,0,20">
                                <StackPanel Margin="0,-5">
                                    <TextBlock TextWrapping="Wrap" Text="Tertiary command link rest state" FontWeight="SemiLight" FontSize="14.667"/>
                                </StackPanel>
                            </Button>
                        </StackPanel>
                    </Grid>
                </StackPanel>
                <Grid x:Name="App_Dialog" Margin="0,0,80,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="App Dialog" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                    <ContentControl Margin="0" Style="{StaticResource Blue-ContentControl}" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="290">
                        <Grid Margin="20,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock TextWrapping="Wrap" Text="Main instruction Ay" FontSize="20" Margin="0"/>
                            <TextBlock TextWrapping="Wrap" Text="Ay Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas fringilla lorem, quis commodonisi venenatis non. Vestibulum augue ipsum, adipscing sed cursus id velit. Morbi id tortor in erat tristique hendrerit ut pulvinar ante." FontSize="14.667" Margin="0,11,0,0" Grid.Row="1"/>
                            <StackPanel Grid.RowSpan="2" Grid.Row="2" Orientation="Horizontal" FlowDirection="RightToLeft">
                                <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#20000000" Foreground="Black" Margin="0,0,10,0" Height="32" Style="{StaticResource Blue-UnrecommandedButton}"/>
                                <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,10,0" Style="{StaticResource Blue-RecommendedButtonLight}" />
                            </StackPanel>
                        </Grid>
                    </ContentControl>
                </Grid>
                <Grid x:Name="Flipper" Margin="0,0,80,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Flipper" VerticalAlignment="Top" Margin="0,1,0,0" Opacity="0.4" Style="{StaticResource Font-B2}"/>
                    <FlipView HorizontalAlignment="Left" VerticalAlignment="Top" Height="213" Width="229" Margin="0" Background="#FF463D3D" Grid.Row="1" Style="{StaticResource Blue-FlipView}" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
                        <Grid Width="100" Height="100">
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="1" VerticalAlignment="Center" Foreground="White" FontSize="53.333"/>
                        </Grid>
                        <Grid Width="100" Height="100">
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="2" VerticalAlignment="Center" Foreground="White" FontSize="53.333" Margin="0"/>
                        </Grid>
                        <Grid Width="100" Height="100">
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="3" VerticalAlignment="Center" Foreground="White" FontSize="53.333" Margin="0"/>
                        </Grid>
                    </FlipView>
                </Grid>
                <StackPanel Orientation="Vertical" Margin="0,0,80,0">
                    <Grid x:Name="Text_box">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text box" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <TextBox HorizontalAlignment="Left" Margin="0" TextWrapping="Wrap" Text="Textbox Content" VerticalAlignment="Top" Grid.Row="1" Width="200" Style="{StaticResource Blue-TextBox}"/>
                        <PasswordBox VerticalAlignment="Top" Grid.Row="1" Margin="0,60,0,0" Style="{StaticResource Blue-PasswordBox}" IsPasswordRevealButtonEnabled="True" Width="200" HorizontalAlignment="Left"/>
                    </Grid>
                    <Grid x:Name="Inline_errors" Margin="0,23,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Inline Errors" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel VerticalAlignment="Top" Grid.Row="1">
                            <CheckBox Content="CheckBox" VerticalAlignment="Stretch" Style="{StaticResource Blue-CheckBox}"/>
                            <Border Background="#FFF15A24" CornerRadius="16" Margin="0,7,0,0" Padding="16,8" Width="284">
                                <TextBlock TextWrapping="Wrap" FontSize="16" FontFamily="Segoe UI" FontWeight="Light" Foreground="White">
    								<Run Text="This credit card number is not vaild."/>
    								<LineBreak/>
    								<Run Text="Place enter a valid credit card number."/>
                                </TextBlock>
                            </Border>
                            <Grid Height="119" Margin="0,40,0,0" Width="284">
                                <Border Background="#FFF15A24" CornerRadius="16" Margin="0" Padding="16,8" Width="284">
                                    <TextBlock TextWrapping="Wrap" FontSize="16" FontFamily="Segoe UI" FontWeight="Light" Foreground="White" Margin="0,36,0,0">
    									<Run Text="This credit card number is not vaild."/>
    									<LineBreak/>
    									<Run Text="Place enter a valid credit card number."/>
                                    </TextBlock>
                                </Border>
                                <TextBox TextWrapping="Wrap" Text="TextBox" Margin="2,2,2,0" VerticalAlignment="Top" Style="{StaticResource Blue-TextBox}"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="0,0,80,0">
                    <Grid x:Name="Progress">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Progress" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1" VerticalAlignment="Top">
                            <ProgressBar x:Name="MyProgressbar" HorizontalAlignment="Left" Height="10" VerticalAlignment="Top" Width="200" IsIndeterminate="True" Margin="0,0,0,10" Style="{StaticResource Blue-ProgressBar}"/>
                            <ProgressBar x:Name="MyProgressbar2" HorizontalAlignment="Left" Height="10" VerticalAlignment="Top" Width="200" Value="40" Foreground="Magenta" Margin="0,0,0,10" Style="{StaticResource Blue-ProgressBar}"/>
                        </StackPanel>
                    </Grid>
                    <Grid x:Name="Slider" Margin="0,76,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Slider" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                        <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                            <Slider HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Orientation="Vertical" Height="119" Margin="0,0,0,20" Value="50" Style="{StaticResource Blue-Slider}"/>
                            <Slider HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Orientation="Horizontal" Height="119" Style="{StaticResource Blue-Slider}"/>
                        </StackPanel>
                    </Grid>
                </StackPanel>
                <Grid x:Name="Toggle_menu" Margin="0,0,80,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Toggle Menu" VerticalAlignment="Top" Margin="0,1,0,0" Style="{StaticResource Font-B2}" Opacity="0.4"/>
                    <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Style="{StaticResource Blue-ContentControl}" Width="141" Height="234">
                        <StackPanel>
                            <CheckBox Content="Left" VerticalAlignment="Stretch" Style="{StaticResource Blue-CheckBoxforToggleMenu}" Foreground="Black" Margin="0,-8,0,12" IsChecked="True"/>
                            <CheckBox Content="Center" VerticalAlignment="Stretch" Style="{StaticResource Blue-CheckBoxforToggleMenu}" Foreground="Black" Margin="0,0,0,13" IsChecked="True"/>
                            <CheckBox Content="Right" VerticalAlignment="Stretch" Style="{StaticResource Blue-CheckBoxforToggleMenu}" Foreground="Black"/>
                            <Grid Height="1" Width="108" Background="Black" Margin="0,18,0,0"/>
                            <CheckBox Content="Bold" VerticalAlignment="Stretch" Style="{StaticResource Blue-CheckBoxforToggleMenu}" Foreground="Black" Margin="0,14,0,13" IsChecked="True"/>
                            <CheckBox Content="Right" VerticalAlignment="Stretch" Style="{StaticResource Blue-CheckBoxforToggleMenu}" Foreground="Black"/>
                        </StackPanel>
                    </ContentControl>
                </Grid>
                <Grid x:Name="Media_Player" Margin="0,0,80,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Media Player" VerticalAlignment="Top" Margin="0,1,0,0" Opacity="0.4" Style="{StaticResource Font-B2}"/>
                    <StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
                        <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-MediaPlayerContentControl}" Margin="0,0,0,40" Width="554">
                            <Grid Height="27" Width="538">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="152"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="0">
                                    <Path Data="F1M302,79.125L302,89.125L310.75,84.25z" Fill="#FF333434" Height="10" Canvas.Left="0" Stretch="Fill" Canvas.Top="1.833" Width="8.75" Margin="2,0,0,0"/>
                                </Button>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="1"/>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,0,-50" Value="20" Grid.Column="2" Width="132"/>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,3,0,2" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="3"/>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="20,0,0,0" Grid.Column="4">
                                    <Grid Height="14" Canvas.Left="47" Width="17">
                                        <Path Data="M0,3.70801 L2,3.70801 L2,9.70801 L0,9.70801 z M8,0 L8,13.667 L3,9.708 L3,3.708 z" Fill="#FF333434" Stretch="Fill" UseLayoutRounding="False" Margin="0,0,9,0.333"/>
                                        <Path x:Name="path" Data="M358.752,81.0835L364.668,87.0005" Height="7.917" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                        <Path x:Name="path1" Data="M364.668,81.084L358.752,87" Height="7.916" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                    </Grid>
                                </Button>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,10,-50" Value="60" Grid.Column="5"/>
                                <ProgressBar Grid.ColumnSpan="6" Height="10" VerticalAlignment="Top" Margin="10,-8,10,0" IsIndeterminate="True" Visibility="Collapsed"/>
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Error loading from server" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3" Foreground="#FF333333" FontFamily="Segoe UI" FontSize="16" Margin="20,0,0,1" Visibility="Collapsed"/>
                            </Grid>
                        </ContentControl>
                        <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-MediaPlayerContentControl}" Margin="0,0,0,40" Width="554">
                            <Grid Height="27" Width="538">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="152"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="0">
                                    <Path Data="F1M302,79.125L302,89.125L310.75,84.25z" Fill="#FF333434" Height="10" Canvas.Left="0" Stretch="Fill" Canvas.Top="1.833" Width="8.75" Margin="2,0,0,0"/>
                                </Button>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="1" Visibility="Collapsed"/>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,0,-50" Value="20" Grid.Column="2" Width="132" Visibility="Collapsed"/>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,3,0,2" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="3" Visibility="Collapsed"/>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="20,0,0,0" Grid.Column="4">
                                    <Grid Height="14" Canvas.Left="47" Width="17">
                                        <Path Data="M0,3.70801 L2,3.70801 L2,9.70801 L0,9.70801 z M8,0 L8,13.667 L3,9.708 L3,3.708 z" Fill="#FF333434" Stretch="Fill" UseLayoutRounding="False" Margin="0,0,9,0.333"/>
                                        <Path x:Name="path2" Data="M358.752,81.0835L364.668,87.0005" Height="7.917" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                        <Path x:Name="path3" Data="M364.668,81.084L358.752,87" Height="7.916" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                    </Grid>
                                </Button>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,10,-50" Value="60" Grid.Column="5"/>
                                <ProgressBar Grid.ColumnSpan="6" Height="10" VerticalAlignment="Top" Margin="10,-8,10,0" IsIndeterminate="True"/>
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Error loading from server" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3" Foreground="#FF333333" FontFamily="Segoe UI" FontSize="16" Margin="20,0,0,1" Visibility="Collapsed"/>
                            </Grid>
                        </ContentControl>
                        <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-MediaPlayerContentControl}" Margin="0,0,0,40" Width="554">
                            <Grid Height="27" Width="538">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="152"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="0">
                                    <Path Data="F1M302,79.125L302,89.125L310.75,84.25z" Fill="#FF333434" Height="10" Canvas.Left="0" Stretch="Fill" Canvas.Top="1.833" Width="8.75" Margin="2,0,0,0"/>
                                </Button>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="1" Visibility="Collapsed"/>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,0,-50" Value="20" Grid.Column="2" Width="132" Visibility="Collapsed"/>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,3,0,2" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="3" Visibility="Collapsed"/>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="20,0,0,0" Grid.Column="4">
                                    <Grid Height="14" Canvas.Left="47" Width="17">
                                        <Path Data="M0,3.70801 L2,3.70801 L2,9.70801 L0,9.70801 z M8,0 L8,13.667 L3,9.708 L3,3.708 z" Fill="#FF333434" Stretch="Fill" UseLayoutRounding="False" Margin="0,0,9,0.333"/>
                                        <Path x:Name="path4" Data="M358.752,81.0835L364.668,87.0005" Height="7.917" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                        <Path x:Name="path5" Data="M364.668,81.084L358.752,87" Height="7.916" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                    </Grid>
                                </Button>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,10,-50" Value="60" Grid.Column="5"/>
                                <ProgressBar Grid.ColumnSpan="6" Height="10" VerticalAlignment="Top" Margin="10,-8,10,0" IsIndeterminate="True" Visibility="Collapsed"/>
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Error loading from server" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3" Foreground="#FF333333" FontFamily="Segoe UI" FontSize="16" Margin="20,0,0,1"/>
                            </Grid>
                        </ContentControl>
                        <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-MediaPlayerContentControl}" Margin="0,0,0,40" Width="554">
                            <Grid Height="27" Width="538">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="152"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="0">
                                    <Path Data="F1M302,79.125L302,89.125L310.75,84.25z" Fill="#FF333434" Height="10" Canvas.Left="0" Stretch="Fill" Canvas.Top="1.833" Width="8.75" Margin="2,0,0,0"/>
                                </Button>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="1"/>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,0,-50" Value="20" Grid.Column="2" Width="132"/>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,3,0,2" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="3"/>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="20,0,0,0" Grid.Column="4">
                                    <Grid Height="14" Canvas.Left="47" Width="17">
                                        <Path Data="M0,3.70801 L2,3.70801 L2,9.70801 L0,9.70801 z M8,0 L8,13.667 L3,9.708 L3,3.708 z" Fill="#FF333434" Stretch="Fill" UseLayoutRounding="False" Margin="0,0,9,0.333"/>
                                        <Path x:Name="path6" Data="M358.752,81.0835L364.668,87.0005" Height="7.917" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                        <Path x:Name="path7" Data="M364.668,81.084L358.752,87" Height="7.916" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                    </Grid>
                                </Button>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,10,-50" Value="60" Grid.Column="5"/>
                                <ProgressBar Grid.ColumnSpan="6" Height="10" VerticalAlignment="Top" Margin="10,-8,10,0" IsIndeterminate="True"/>
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Error loading from server" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3" Foreground="#FF333333" FontFamily="Segoe UI" FontSize="16" Margin="20,0,0,1" Visibility="Collapsed"/>
                            </Grid>
                        </ContentControl>
                        <ContentControl HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource Blue-MediaPlayerContentControl}" Margin="0,0,0,40" Width="554">
                            <Grid Height="27" Width="538">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="152"/>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="0">
                                    <Path Data="F1M302,79.125L302,89.125L310.75,84.25z" Fill="#FF333434" Height="10" Canvas.Left="0" Stretch="Fill" Canvas.Top="1.833" Width="8.75" Margin="2,0,0,0"/>
                                </Button>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="1"/>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,0,-50" Value="20" Grid.Column="2" Width="132" Foreground="Black"/>
                                <TextBlock TextWrapping="Wrap" Text="14:58:20" Foreground="#FF333333" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,3,0,2" FontFamily="Segoe UI" FontWeight="Light" Grid.Column="3"/>
                                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Blue-MediaButton}" Margin="20,0,0,0" Grid.Column="4">
                                    <Grid Height="14" Canvas.Left="47" Width="17">
                                        <Path Data="M0,3.70801 L2,3.70801 L2,9.70801 L0,9.70801 z M8,0 L8,13.667 L3,9.708 L3,3.708 z" Fill="#FF333434" Stretch="Fill" UseLayoutRounding="False" Margin="0,0,9,0.333"/>
                                        <Path x:Name="path8" Data="M358.752,81.0835L364.668,87.0005" Height="7.917" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                        <Path x:Name="path9" Data="M364.668,81.084L358.752,87" Height="7.916" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="#FF333434" StrokeThickness="2" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="7.916" Margin="8.752,2.792,0.248,3.208" UseLayoutRounding="False"/>
                                    </Grid>
                                </Button>
                                <Slider Style="{StaticResource Blue-MediaSlider}" TickPlacement="None" Margin="20,-8,10,-50" Value="60" Grid.Column="5" Foreground="Black"/>
                                <ProgressBar Grid.ColumnSpan="6" Height="10" VerticalAlignment="Top" Margin="10,-8,10,0" IsIndeterminate="True" Visibility="Collapsed"/>
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Error loading from server" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3" Foreground="#FF333333" FontFamily="Segoe UI" FontSize="16" Margin="20,0,0,1" Visibility="Collapsed"/>
                                <Rectangle Grid.ColumnSpan="6" Stroke="Black" Fill="White" Opacity="0.7" StrokeThickness="0" Margin="-8" RadiusX="20" RadiusY="15"/>
                            </Grid>
                        </ContentControl>
                    </StackPanel>
                </Grid>
                <Grid x:Name="Selected" Margin="0,0,80,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Selected" VerticalAlignment="Top" Margin="0,1,0,0" Opacity="0.4" Style="{StaticResource Font-B2}"/>
                    <GridView  
    					Margin="0"
    					ItemContainerStyle="{StaticResource Blue-Container}" 
						CanDragItems="True" 
						SelectionMode="Multiple"
			Grid.Row="1" 
			ItemTemplate="{StaticResource DataTemplate1}" 
			ItemsSource="{Binding Groups}" 
			SelectedIndex="0" 
			ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        ScrollViewer.HorizontalScrollMode="Disabled"
                        ScrollViewer.VerticalScrollMode="Disabled" CanReorderItems="True" IsItemClickEnabled="True" IsSynchronizedWithCurrentItem="False" AllowDrop="True" IsActiveView="False" IsSwipeEnabled="True" FontFamily="Global User Interface"
			>
                        <GridView.Style>
                            <Style TargetType="GridView">
                                <Setter Property="Padding" Value="0,0,0,10"/>
                                <Setter Property="IsTabStop" Value="False"/>
                                <Setter Property="TabNavigation" Value="Once"/>
                                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
                                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
                                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
                                <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
                                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
                                <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
                                <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                                <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                                <Setter Property="IsSwipeEnabled" Value="True"/>
                                <Setter Property="ItemContainerTransitions">
                                    <Setter.Value>
                                        <TransitionCollection>
                                            <AddDeleteThemeTransition/>
                                            <ContentThemeTransition/>
                                            <ReorderThemeTransition/>
                                            <EntranceThemeTransition IsStaggeringEnabled="False"/>
                                        </TransitionCollection>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="ItemsPanel">
                                    <Setter.Value>
                                        <ItemsPanelTemplate>
                                            <WrapGrid Orientation="Vertical"/>
                                        </ItemsPanelTemplate>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="GridView">
                                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                                <ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                                    <ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
                                                </ScrollViewer>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GridView.Style>
                        
                        <ScrollBar/>
                        <ContentPresenter/>
                    </GridView>
                </Grid>
            </StackPanel>
        </ScrollViewer>
        <Canvas Grid.RowSpan="2">
            <include:Scene/>
        </Canvas>
    </Grid>

    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="rightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
</common:LayoutAwarePage>